<!--
 * @Author: wanglianxin 532445330@qq.com
 * @Date: 2023-11-07 18:30:18
 * @LastEditors: wanglianxin 532445330@qq.com
 * @LastEditTime: 2023-11-19 15:59:23
 * @FilePath: /src/pages/Main/Main.vue
 * @Description:
-->
<template>
  <el-container class="flex-space">
    <el-header height="55px" class="main-header">
      <Header></Header>
    </el-header>
    <el-main style="display: flex">
      <el-container>
        <el-aside width="200px" style="display: flex">
          <el-menu
            default-active="2"
            class="flex-space"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSlect"
            :router="true"
          >
            <el-menu-item v-for="(item, index) in menuList" :index="item.path">
              <template #title>{{ item.name }}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main> <router-view></router-view></el-main></el-container
    ></el-main>
  </el-container>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from "vue";
import Header from "../../components/Header/Header.vue";
import { components } from "../Markdown/index";
//目录
const isCollapse: Ref<Boolean> = ref(false);

let menuList: { name: String; path: string }[] = [];
components.map((item) => {
  menuList.push({
    name: item.name,
    path: "/main/markdown/" + item.key,
  });
});
menuList = reactive(menuList);
const handleOpen = () => {};
const handleClose = () => {};
const handleSlect = (data: string) => {
  console.log(data);
};
</script>
<style lang="scss" scoped>
.main-header {
  border-bottom: 1px solid var(--border-color);
  line-height: var(--header-height);
  padding: 0;
}
</style>
../Markdown/index
